<template>
  <div class="home">
    <home-head></home-head>
    <home-swiper :banner="banner"></home-swiper>
    <home-icons :icons="icons"></home-icons>
    <p  class="hot">热销推荐</p>
    <home-hot :recommendList="recommendList"></home-hot>
    <p  class="hot">周末去哪</p>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
import HomeHead from  './home/components/Head';
import HomeSwiper from './home/components/Swiper';
import HomeIcons  from "./home/components/Icons";
import HomeHot from "./home/components/hot";
import HomeWeekend from "./home/components/weekend";
import {HomeModel} from "../models/HomeModels";
const homeModel = new  HomeModel();
export default { 
  name: "home",
  components:{
    HomeHead,
    HomeSwiper,
    HomeIcons,
    HomeHot,
    HomeWeekend
  },
  data(){
    return{
      banner:[],
      icons:[],
      recommendList:[],
      weekendList:[]
    }
  },
  mounted(){
    homeModel.getHome().then(res=>{
      let data = res.data.data;
      let {banner,icons,recommendList,weekendList}=data;
      this.banner = banner;
      this.icons = icons;
      this.recommendList = recommendList;
      this.weekendList =weekendList ;
    })
  }
};
</script>
<style lang="scss" scoped>
.nav {
  width:375px;
  height: 40px;
  background: red;
}
.hot{
    background-color: #eee;
    height: 60px;
    padding: 24px 0px 0px 34px;
}
</style>
